<template>
	<view class="payBox">
		<view class="header">{{info.num|titleFilter}} <text class="close" @click="close">+</text> </view>
		<view class="orderInfo">
			<image class="img" :src="info.cover_image"></image>
			<view class="desc">
				<view class="name">{{info.activity_describe}}
				</view>
				<view class="price">
					<view class="num">单价
						<text class="unit"> ￥ </text>
						{{info.first_blood||info.price}}
					</view>
					<view class="count">数量 x {{info.num|countFilter}}</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="paytype">
			<view class="title">支付方式</view>
			<view class="paytype_item" @click="payActive=2">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 2" class="paytype_item_check">
				</image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
				<text>微信支付</text>
			</view>
			
			<view class="paytype_item" @click="payActive=1">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 1" class="paytype_item_check">
				</image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
				<text>支付宝支付</text>
			</view>
			<view class="paytype_balance" @click="payActive=0">
				<view class="paytype_balance_left">
					<image src="/static/images/mall/paychecked.png" v-if="payActive === 0"
						class="paytype_balance_left_check"></image>
					<image src="/static/images/mall/paycheck.png" v-else class="paytype_balance_left_check"></image>
					<image src="/static/images/mall/balance.png" class="paytype_balance_left_icon"></image>
					<text>心愿币支付</text>
				</view>
			<!-- 	<view class="paytype_balance_right">
					当前可用心愿币为<text>￥{{payBalance}}</text>
				</view> -->
			</view>
			


		</view>
		<view class="tips">商品拍奖存在概率性，付费请谨慎!</view>
		<view class="agree" @click="isAgree=!isAgree">
			<image class="agreeImg" v-if="isAgree" src="@/static/images/newhone/check.png"></image>
			<!-- <image  v-else src="@/static/images/newhone/noCheck.png"></image> -->
			<view v-else class="agreeImgn"></view>
			已阅读并同意
			<text class="text">《用户协议》</text>
		</view>
		<view class="footer">
			<view class="l">合计 ￥ <text>{{info.price}}</text></view>
			<view class="r" @click="submit">确认购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			payBalance:{
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				isAgree: true,
				showDetail: false,
				allowTap: true, //防误触
				payActive: 2, //支付方式
				total: 0,
				timestamp: '',
				order_id:''
			}
		},
		filters: {
			titleFilter(num) {
				let str = ''
				switch (num) {
					case 1:
						str = '霸气一连'
						break;
					case 3:
						str = '霸气三连'
						break;
					case 2:
						str = '霸气五连'
						break;
					default:
						break;
				}
				return str
			},
			countFilter(num){
				let str = 1
				switch (num) {
					case 1:
						str = 1
						break;
					case 3:
						str = 3
						break;
					case 2:
						str = 5
						break;
					default:
						break;
				}
				return str
			},
			totalFilter(total, that) {
				return that.info.num * that.info.first_blood
			}
		},
		mounted() {
			console.log(this.info,'123');
		},
		methods: {
			//支付前
			submit() {
				let randomnum = Math.round(Math.random() * 99999 + 0);
				this.timestamp = Date.now().toString() + randomnum.toString();
				if (!this.isAgree) {
					uni.showToast({
						duration: 3000,
						icon: 'none',
						title: '请勾选《用户协议》'
					})
					return false
				}
				if (!this.allowTap) return
				this.allowTap = false;
				setTimeout(() => {
					this.allowTap = true;
				}, 3000)
				if (this.payActive == 0) {
					//支付类型为余额
					this.$api.indexExtractboxd({
						activity_id: this.info.id,
						coupon_id:'',
						balance: this.info.price,
						open_method: this.info.num,
						price: '0',
						pay_type: '0',
						box_d: this.timestamp
					}).then(res => {
						console.log("抽取盲盒金额为0: ", res);
						this.$emit('paySuccess',{order_id:res.order_id,id:this.info.id})
					})
				} else{
					//支付类型为支付宝 微信
					this.$api.indexExtractboxb({
						activity_id: this.info.id,
						coupon_id:'',
						balance: '0',
						open_method: this.info.num,
						price: this.info.price,
						pay_type: this.payActive
					}).then(res => {
					
						console.log('抽取盲盒金额大于0', res);
						this.order_id = res.order_id;
						//支付
						this.goPay(this.payActive, res.pay_info, this.info.num);
					})
				}
				
			},
			//去支付
			goPay(pay_type, payInfo) {
				const that = this
				uni.showLoading({
					title: '支付中...'
				})
				if (pay_type == 2) {
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay",
									orderInfo: payInfo,
									success: (res) => {
									
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										that.$emit('paySuccess',{order_id:this.order_id,id:this.info.id})
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				} else {
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay",
									"orderInfo": payInfo,
									success: (res) => {
										
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										that.$emit('paySuccess',{order_id:this.order_id,id:this.info.id})
										
										
									},
									fail: (err) => {
										uni.showToast({
											title:'支付失败'+JSON.stringify(res),
											icon: 'none'
										})
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
			},
			close() {
				this.$emit('close')
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
	.payBox {
		height: 900rpx;
		color: #000;

		.header {
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			font-weight: 600;
			font-size: 32rpx;
			position: relative;
			background-color: #fff;

			.close {
				font-size: 60rpx;
				transform: rotateZ(45deg);
				position: absolute;
				right: 20rpx;
				top: 0rpx;
			}
		}

		.orderInfo {
			width: calc(100% - 80rpx);
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			box-sizing: border-box;
			background-color: #fff;
			margin: auto;

			.img {
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
			}

			.desc {
				flex: 1;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-weight: 600;
					font-size: 36rpx;

				}

				.price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #63c0ab;

					.num {
						font-size: 34rpx;

						.unit {
							font-size: 24rpx;
							margin: 0 10rpx;
						}
					}

					.count {
						// font-weight: 600;
						color: #000;
						font-size: 24rpx;
					}
				}
			}
		}

		.paytype {
			width: 750rpx;
			// background-color: $white;
			margin-top: 12rpx;
			padding: 30rpx;

			&_item {
				@include align-center;
				margin-top: 30rpx;

				&:first-child {
					margin-top: 0;
				}

				&_check {
					width: 36rpx;
					height: 36rpx;
				}

				&_icon {
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx;
				}

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}

			&_balance {
				margin-top: 30rpx;
				@include between;

				&_left {
					@include align-center;

					&_check {
						width: 36rpx;
						height: 36rpx;
					}

					&_icon {
						width: 40rpx;
						height: 40rpx;
						margin: 0 20rpx;
					}

					text {
						
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}

				&_right {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FF1200;
						margin-left: 16rpx;
					}
				}
			}

			&_warning {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF1200;
				margin-top: 24rpx;
			}

			&_tip {
				margin-top: 40rpx;

				&_title {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				&_text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #999999;
				}

				&_content {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-top: 16rpx;

					text {
						margin-right: 10rpx;
					}
				}
			}
		}
		.tips{
			color: red;
			text-align: center;
			font-size: 14rpx;
			margin-top: 20rpx;
		}
		.agree {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-top: 10rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #ddd;

			.agreeImg {
				width: 25rpx;
				height: 25rpx;
				background-color: #fff;
				border-radius: 50%;
				margin-right: 20rpx;

			}

			.agreeImgn {
				width: 25rpx;
				height: 25rpx;
				border: 1px solid #ddd;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 50%;
				margin-right: 20rpx;

			}

			.text {
				color: #2f67a2;
				font-weight: 600;
			}
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 20rpx;

			.l {
				font-size: 28rpx;
				text{
					font-weight: 600;
					font-size: 36rpx;
					color: red;
				}
			}

			.r {
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				background-color: #51c8c2;
				color: #fff;
				border-radius: 40rpx;
			}
		}




	}
</style>
